<template>
    <div class="layout-box" :class="{collapsed: isCollapse}">
        <header class="layout-header">
            <div class="logo-box"></div>
            <div class="layout-header-main">
                <i class="el-icon-s-fold" @click="toggleSideMenu"></i>
                <el-breadcrumb separator="/">
                    <!-- <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
                    <el-breadcrumb-item>活动列表</el-breadcrumb-item>
                    <el-breadcrumb-item>活动详情</el-breadcrumb-item> -->
                    <el-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">{{item.meta.title}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
        </header>
        <aside class="layout-aside">
            <el-menu
                default-active="dashboard"
                :collapse="isCollapse"
                background-color="#545c64"
                text-color="#fff"
                active-text-color="#ffd04b"
                :collapse-transition="false"
                router
            >
                <el-submenu index="1">
                    <template #title>
                        <i class="el-icon-location"></i>
                        <span>基础知识</span>
                    </template>
                    <el-menu-item-group>
                        <template #title>分组一</template>
                        <el-menu-item index="dashboard">Dashboard</el-menu-item>
                        <el-menu-item index="vmodel">v-model使用</el-menu-item>
                        <el-menu-item index="computedwatch">ComputedWatch</el-menu-item>
                        <el-menu-item index="provideinject">提供/注入</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="分组2">
                        <el-menu-item index="1-3">选项3</el-menu-item>
                    </el-menu-item-group>
                    <el-submenu index="1-4">
                        <template #title>选项4</template>
                        <el-menu-item index="1-4-1">选项1</el-menu-item>
                    </el-submenu>
                </el-submenu>
                <el-menu-item index="2">
                    <i class="el-icon-menu"></i>
                    <template #title>导航二</template>
                </el-menu-item>
                <el-menu-item index="3" disabled>
                    <i class="el-icon-document"></i>
                    <template #title>导航三</template>
                </el-menu-item>
                <el-menu-item index="4">
                    <i class="el-icon-setting"></i>
                    <template #title>导航四</template>
                </el-menu-item>
            </el-menu>
        </aside>
        <div class="layout-main">
            <router-view />
        </div>
    </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'

export default {
    setup() {
        const store = useStore()
        const route = useRoute()
        // const isCollapse = ref(false)
        const isCollapse = computed(() => !store.state.setting.sideMenu.opened)
        const breadcrumb = computed(() => route.matched)
        console.log(breadcrumb.value)
        return {
            isCollapse,
            breadcrumb,
            toggleSideMenu: () => {
                store.commit('toggleSideMenu', isCollapse.value)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
</style>